<template>
  <div>
    <a-form-item label="工序路线" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
      <a-button type="primary" @click="addWorkStep" :disabled="disabled"> 增加工序 </a-button>
      <vxe-button @click="delChecked" :disabled="disabled === true?true:(checkedList.length === 0?true:false)">删除选中</vxe-button>
      <vxe-table
        ref="workStepTable"
        border
        resizable
        show-overflow
        :data="tableData"
        :key="tableKeyValue"
        :edit-config="{ trigger: 'click', mode: 'cell' }"
        :checkbox-config="{ highlight: true }"
        @checkbox-change="onChecked($event)"
        @checkbox-all="allChecked($event)"
      >
        <vxe-table-column width="10%">
          <template v-slot>
              <!--            <span class="drag-btn">-->
              <!--              <i class="vxe-icon&#45;&#45;menu" style="font-size: 30px ;margin-left: 30px; vertical-align: center" >*</i>-->
              <!--            </span>-->
              <!-- 鼠标悬停可拖拽-->
            <span class="drag-btn" style="cursor: pointer">
              <i class="vxe-icon--menu" style="font-size: 20px ;margin-left: 10px; vertical-align: center" ></i>
              <a-icon type="ordered-list" v-if="icon" />
              <!--            <a-icon type="column-height" v-if="!icon" />-->
            </span>
          </template>
          <template v-slot:header>
            <vxe-tooltip content="按住后可以上下拖动排序！" enterable>
              <i class="vxe-icon--question"></i>
            </vxe-tooltip>
          </template>
        </vxe-table-column>
        <vxe-column ref="checkbox" type="checkbox" :disabled="disabled" width="20%"></vxe-column>
        <vxe-column type="seq" width="20%"></vxe-column>
        <vxe-column field="workStepId" title="工序" width="50%" :edit-render="{}">
          <template #default="{ row }">
            <a-tag>{{ formatWorkStep(row.workStepId) }}</a-tag>
          </template>
          <template #edit="{ row }">
            <vxe-select v-model="row.workStepId" transfer :disabled="disabled">
              <vxe-option v-for="item in list.workStep" :key="item.id" :value="item.id" :label="item.name"></vxe-option>
            </vxe-select>
          </template>
        </vxe-column>
      </vxe-table>
    </a-form-item>
  </div>
</template>

<script>
import Sortable from 'sortablejs'
import { workStepList } from '@/api/modular/main/workstep/workStepManage'
import XEUtils from 'xe-utils'
import VXETable from 'vxe-table'
export default {
  props: {
    oldTableData: {
      type: Array,
      default() {
        return []
      }
    },
    disabled: {
      type: Boolean,
      default() {
        return false
      }
    },
    oldworkRouteData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      tableData: [],
      workRouteData: {},
      checkedList: [],
      list: {
        //  工序
        workStep: []
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      tableKeyValue: 0,
      icon: true
    }
  },
  created() {
    this.tableData = this.oldTableData
    if (this.tableData !== null) {
      this.tableData.forEach((element, index) => {
        element.sortNum = index + 1
      })
    }
    this.workRouteData = this.oldworkRouteData
    //  获取所有工序
    workStepList().then((res) => {
      this.list.workStep = res.data
    })
  },
  mounted() {
    this.drag()
  },
  methods: {
    //  根据工序id显示工序name
    formatWorkStep(value) {
      return XEUtils.find(this.list.workStep, (item) => item.id === value)?.name
    },
    //  增加工序
    addWorkStep() {
      if (this.list.workStep[0] === undefined) {
        this.$message.error('工序列表为空')
        return
      }
      this.tableData.push({ workStepId: this.list.workStep[0].id })
      this.tableData.forEach((element, index) => {
        element.sortNum = index + 1
      })
    },
    //  删除选中
    async delChecked() {
      const type = await VXETable.modal.confirm('您确定要删除该数据?')
      console.log(type)
      if (type === 'confirm') {
        this.$refs.workStepTable.removeCheckboxRow()
        this.tableData = Array.from(this.$refs.workStepTable.getTableData().tableData,
          item => { return { id: item.id, sortNum: Number(item.sortNum), workStepId: item.workStepId } })
        this.checkedList = []
        this.tableKeyValue++
      }
    },
    // 表格行拖拽
    drag() {
      this.$nextTick(() => {
        const xTable = this.$refs.workStepTable
        Sortable.create(xTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody'),
          {
            handle: '.drag-btn',
            animation: 150,
            onEnd: ({ newIndex, oldIndex }) => {
              const currRow = this.tableData.splice(oldIndex, 1)[0]
              this.tableData.splice(newIndex, 0, currRow)
              this.tableKeyValue++
            }
          })
      })
    },
    // 点击单个复选框c
    onChecked($event) {
      if ($event.checked === true) {
        this.checkedList.push(true)
      }
      if ($event.checked === false) {
        this.checkedList.pop()
      }
    },
    // 点击全选
    allChecked($event) {
      if ($event.checked === true) {
        this.checkedList.splice(0, -1)
        this.checkedList = []
        for (let i = 0; i < this.tableData.length; i++) {
          this.checkedList.push(true)
        }
      }
      if ($event.checked === false) {
        this.checkedList.splice(0)
      }
    }
  },
  watch: {
    //  监听tableData变化，修改父组件的tableData
    tableData: {
      handler() {
        this.$emit('new-table-data', this.tableData)
      },
      deep: true
    },
    tableKeyValue: {
      handler() {
        //  表格数据刷新后重新调用拖拽方法
        this.drag()
      },
      deep: true
    }
  }
}
</script>

<style scoped>
</style>
